<template>
  <div class="order-item-container">
    <Panel title="下单时间：2019-07-29 16:46:12">
      <span class="order-no" slot="panel-title">订单号：87007364</span>
      <!-- 商品列表 -->
      <div class="goods">
        <!-- 商品信息及订单状态 -->
        <div class="info">
          <div class="detail">
            <img src="http://yanxuan.nosdn.127.net/b9fd72b72a75137cdb0528498044a2d1.png?imageView&thumbnail=100x100&quality=95" alt="">
            <div class="name">全棉针织条纹大豆纤维夏被  可机洗</div>
          </div>
          <div class="status">未付款</div>
        </div>
        <!-- 价格 -->
        <div class="price">
          <div class="pay-price">{{ $t('priceSymbol') }}159.00</div>
          <div class="other-price">(含运费：{{$t('priceSymbol')}}0.00)</div>
        </div>
        <!-- 操作 -->
        <div class="operation">
          <div class="link">付款</div>
          <div class="link">查看详情</div>
          <div class="link">取消订单</div>
        </div>
      </div>
    </Panel>
  </div>
</template>

<script>
import Panel from '@/components/Panel'

export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },

  components: {
    Panel
  }
}
</script>

<style lang="less">
@import "../../styles/variable.less";

.order-item-container {
  padding: 10px 0px;
  .order-no {
    margin-left: 50px;
  }
  .panel-title {
    color: @font-color !important;
    font-size: 12px !important;
  }
  .goods {
    display: flex;
    .info {
      align-items: center;
      border-right: 1px solid @border-color2;
      display: flex;
      padding: 20px;
      // width: 620px;
      .detail {
        align-items: center;
        display: flex;
        width: 340px;
        img {
          background-color: @bg-img;
          width: 100px;
          height: 100px;
        }
        .name {
          font-size: 14px;
          margin-left: 10px;
        }
      }
      .status {
        width: 130px;
        text-align: center;
      }
    }
    .price {
      align-items: center;
      border-right: 1px solid @border-color2;
      display: flex;
      flex-direction: column;
      width: 200px;
      justify-content: center;
      .pay-price {
        font-size: 14px;
        font-weight: 700;
      }
      .other-price {
        margin-top: 8px;
      }
    }
    .operation {
      align-items: center;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      .link {
        color: @font-color-link;
        cursor: pointer;
        margin-top: 6px;
      }
    }
  }
}
</style>
